import { setState } from "concent";
import React, { useState, useEffect, PureComponent } from "react";
import { Drawer, Row, Col } from 'antd';
import Markdown from 'react-markdown';
import npm from "../doc/README_npm.md"
import md from "../doc/README_npm.md"
import vscodePlugin from "../doc/vscode插件.md"
import devDoc from "../doc/开发手册.md"
import note from "../doc/前端学习笔记Note.md"
import css from "../doc/css学习.md"

let input = '# 这是标题\n' +
    '[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n' +
    '> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已... \n\n' +
    '**这是加粗的文字**\n\n' +
    '*这是倾斜的文字*`\n\n' +
    '***这是斜体加粗的文字***\n\n' +
    '~~这是加删除线的文字~~ \n\n' +
    '\`console.log(Hello World)\` \n\n' +
    '```const a=2; ```'

// https://segmentfault.com/q/1010000011267117 目录生成
const toc = (markdown) => {
    var tables = [];
    var reg = /(#+)\s+?(.+?)\n/g;
    var regExecRes = null
    while ((regExecRes = reg.exec(markdown))) {
        tables.push({
            level: regExecRes[1].length,
            title: regExecRes[2]
        });
    }
    console.info(tables)

    const mulu =
        <div>
            {
                tables.length > 0 &&
                <Drawer
                    title="目录"
                    placement="right"
                    closable={false}
                    // onClose={onClose}
                    visible={true}
                    mask={false}
                    getContainer={false}
                    style={{ position: 'absolute' }}
                >
                    <div className="blog-table">
                        {tables.map(({ level, title }) => (
                            <div key={level} className="blog-table-item">
                                <a
                                    className={"blog-table-item-"}
                                    href={'#' + title}
                                // onClick={e => this.handleScroll(e, hash)}
                                >{title}</a>
                            </div>
                        ))}
                    </div>
                </Drawer>
            }
        </div>


    return mulu
}


const RenderMD = (props) => {
    // 配置路由和md文本的对应关系
    const doc = {
        "/vscode/": vscodePlugin,
        "/npm/": npm,
        "/md/": md,
        "/devDoc/": devDoc,
        "/note/": note,
        "/css/": css,
    }
    const name = props.location.pathname // pathname 表示 md的文件name
    const [state, setState] = useState(input)
    useEffect(() => {
        setState(doc[name])
    }, [name])

    // 都是些邪门歪道,哈哈哈
    // const test = import("../doc/开发手册.md")
    // import("../doc/开发手册.md").then((module) => { setState(module) })
    return (


        <Row justify="center" align="top">
            <Col span={18}>
                <Markdown children={state}></Markdown>
            </Col>
            <Col span={6}>
                {toc(state)}
            </Col>
        </Row>


    );
}

export default RenderMD